<template>
  <f7-page>
    <f7-navbar :title="$t('m.tabs.equitySwap')" back-link=" ">
      <f7-nav-right>
        <f7-link class="txt-button" href="/equity-swap-record/">{{$t('m.es2')}}</f7-link>
      </f7-nav-right>
    </f7-navbar>
    <p class="text-right"><f7-link class="sub-rule-link" href="/rule2/">规则说明</f7-link></p>
    <div class="content-padding">
      <f7-list>
        <f7-list-item :title="$t('m.es3')" :after="zichanData[2].num_frozen"></f7-list-item>
        <f7-list-item :title="$t('m.es4')" :after="zichanData[16].num"></f7-list-item>
<!--        <f7-list-item :title="$t('m.es5')" :after="zichanData[15].num"></f7-list-item>-->
<!--        <f7-list-item :title="$t('m.es6')" after="ZOL"></f7-list-item>-->
<!--        <f7-list-item :title="$t('m.es7')" :after="$t('m.es4')"></f7-list-item>-->
      </f7-list>
      <!--<p>{{$t('m.currencyValue')}}：1ZOL≈{{$store.getters.config.config.guquan_bili || '0.00'}}{{$t('m.es4')}}</p>

      <f7-list class="line-input-f7-list-item">
        <f7-list-item :title="$t('m.exchangeNumber')">
          <input type="number" :placeholder="$t('m.exchangeNumberPlaceholder')" slot="after" v-model="exchangeFormItems.num">
        </f7-list-item>
      </f7-list>
      <f7-button class="margin-t80" fill large color="blue" @click="showDialog = true">{{$t('m.exchange')}}</f7-button>-->
    </div>

    <van-dialog
      v-model="showDialog"
      :title="$t('m.dialog.title')"
      show-cancel-button
      @confirm="handleExchange"
      slot="fixed"
    >
      <div class="content-padding margin-t20">
        <custom-input type="password" :placeholder="$t('m.transactionPwdPlaceholder')" v-model="exchangeFormItems.pwd"></custom-input>
      </div>
    </van-dialog>
  </f7-page>
</template>

<script>
  import { runGuquanTrans } from "../api/wealth";

  export default {
    name: "equity-swap",
    data() {
      return {
        exchangeFormItems: {
          num: '',
          pwd: ''
        },
        showDialog: false
      }
    },
    computed: {
      zichanData() {
        return this.$store.getters.userInfo.user_money;
      }
    },
    methods: {
      handleExchange() {
        runGuquanTrans(this.exchangeFormItems).then(res => {
          this.exchangeFormItems.pwd = '';
          this.$f7router.navigate('/equity-swap-record/')
        })
      }
    }
  }
</script>

<style scoped lang="scss">
  p {
    color: $mainColor;
    padding: $padding20;
  }
  .sub-rule-link {
    color: #000;
    font-size: 28px;
  }
</style>
